import React, { useState,useEffect } from 'react'
import {SearchBar, Space, Tag,List} from "antd-mobile"
import { useDeb } from '../../hooks/useDeb'
import {DeleteOutline} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Seach() {
    const [data,setData]=useState([]);

    const onSearch=useDeb(value=>{
        const newData=data.concat(value)
        console.log('防抖',value)
        setData(newData);
        localStorage.setItem('data',JSON.stringify(newData))
    })
    //删除
    const del=(content)=>{
        const newData=data.filter(v=>v!==content);
        setData(newData);
        localStorage.setItem('data',JSON.stringify(newData))
    }
    //清空历史搜索
    const clear=()=>{
        setData([]);
        localStorage.setItem('data',JSON.stringify([]))
    }

    const navigate=useNavigate();
  const [list,setList]=useState([]);
  const [page,setPage]=useState(1);
    const getList=async()=>{
        const res=await axios.get('/chun/cooperation/wap/health_news/',{
            params:{
                from_wx_mini:1,
                page:page,
                partner:'chunyu_wap_mini',
                release_time:'2020-04-22%2010%3A30%3A00',
                channel_id:21
            }
        })
        console.log(res.data.content_list)
        setList(list.concat(res.data.content_list))
        setPage(page+1)
    }
    useEffect(()=>{
        getList()
    },[])
  return (
    <div>
      <SearchBar placeholder='搜索目的地/景点' onSearch={onSearch}></SearchBar>
      <div>
        <div style={{display:"flex", justifyContent:"space-between", marginTop:"10px"}}>
            <h3>历史搜索</h3>
            <span style={{fontSize:"20px"}} onClick={()=>clear()}><DeleteOutline /></span>
        </div>
        <Space>
            {
                data.map((v,i)=>{
                    return <Tag key={i}>
                        <span>{v}</span>
                        <span onClick={()=>del(v)}>X</span>
                    </Tag>
                })
            }
        </Space>
      </div>
      <div>
        <List>
        {
          list.map((v,i)=>{
            return <dl key={i} style={{display:"flex"}} onClick={()=>navigate('/details',{state:v})}>
              <dd>
                <img src={v.img} alt="" />
              </dd>
              <dt>{v.title}</dt>
            </dl>
          })
        }
      </List>
      </div>
    </div>
  )
}

export default Seach
